<template>
  <div class="">
    <el-table
      :data="tableData"
      height="280"
      flexible
      ref="tableRef"
      border
      fil
      :header-cell-style="{ background: '#ECF5FF' }"
      stripe
      clearSort
      v-bind="$attrs"
      table-layout="auto"
    >
      <el-table-column
        v-for="item in column"
        :key="item.prop"
        v-bind="item"
        :width="item.width"
        :fixed="item.prop == 'operation' ? 'right' : false"
      >
        <template #default="scope" v-if="$slots[item.prop]">
          <slot :name="item.prop" v-bind="scope"> </slot>
        </template>
      </el-table-column>
      <template v-slot:empty>
        <el-empty :image-size="60" description="暂时查不到记录"> </el-empty>
      </template>
    </el-table>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref, nextTick, defineProps } from "vue";
import zhCn from "element-plus/dist/locale/zh-cn.mjs";

const props = defineProps({
  offsetHeight: {
    type: Number,
  },
  column: {
    type: Array,
    default: () => [],
  },
  tableData: {
    type: Array,
    default: () => [],
  },
});

const state = reactive({});
onMounted(() => {});
</script>

<style lang="less" scoped>
.pages {
  margin-top: 10px;
  display: flex;
  justify-content: right;
  padding-right: 10px;
  align-items: center;
}

/deep/.is-leaf {
  background-color: #f4f7ff !important;
  /* 使用 !important 来确保优先级 */
  border-right: none !important;
}

/deep/.el-table__cell {
  border-right: none !important;
}

/deep/.el-table__row {
  height: 48px;
}

/deep/.el-table th.el-table__cell.is-leaf {
  text-align: center !important;
}

/deep/.el-table__cell {
  text-align: center !important;
}
</style>
